<template>
  <n-form size="small" :model="form" label-placement="left" :label-width="80">
    <n-form-item path="col" label="表单列数">
      <n-input-number
        :value="$store.state.form.col"
        :min="1"
        :max="4"
        @update:value="$store.commit('setForm', { col: $event })"
      />
    </n-form-item>
    <n-form-item path="labelPlacement" label="标签位置">
      <n-radio-group
        :value="$store.state.form.labelPlacement"
        name="labelPlacement"
        @update:value="$store.commit('setForm', { labelPlacement: $event })"
      >
        <n-radio-button value="top">上边</n-radio-button>
        <n-radio-button value="left">左边</n-radio-button>
      </n-radio-group>
    </n-form-item>
    <n-form-item
      v-if="$store.state.form.labelPlacement == 'left'"
      path="labelWidth"
      label="标签列宽"
    >
      <n-input-number
        :value="$store.state.form.labelWidth"
        :min="60"
        @update:value="$store.commit('setForm', { labelWidth: $event })"
      />
    </n-form-item>
    <n-form-item path="size" label="组件尺寸">
      <n-radio-group
        :value="$store.state.form.size"
        @update:value="$store.commit('setForm', { size: $event })"
      > 
        <n-radio-button value="small">小</n-radio-button>
        <n-radio-button value="medium">默认</n-radio-button>
        <n-radio-button value="large">大</n-radio-button>
      </n-radio-group>
    </n-form-item>
  </n-form>
</template>
<script>
export default {
  props: ["form"],
  setup(props, { emit }) {},
};
</script>
